<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click.native="addFn"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <template>
              <el-table
                :data="list"
                style="width: 100%"
              >
                <el-table-column
                  label="序号"
                  width="80px"
                  type="index"
                />
                <el-table-column
                  label="角色名称"
                  width="150px"
                  prop="name"
                />
                <el-table-column
                  label="描述"
                  prop="description"
                />
                <el-table-column
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-button size="small" type="success" @click="assignFn(scope.row.id)">分配权限</el-button>
                    <el-button size="small" type="primary" @click.native="editFn(scope.row.id)">编辑</el-button>
                    <el-button size="small" type="danger" @click.native="delFn(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- 分页组件 -->
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                layout="prev,pager,next"
                :total="total"
                :page-size="params.pagesize"
                :current-page="params.page"
                @current-change="pageChangeFn"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <el-dialog :title="AddorEdit? '编辑角色':'新增角色'" :visible.sync="showDialog" :close-on-click-modal="false">
        <AddorEdit
          v-if="showDialog"
          :is-edit="AddorEdit"
          :edit-id="editId"
          @updateSett="updateSettFn"
          @off="offFn"
          @updateRole="updateRoleFn"
        />
      </el-dialog>

      <el-dialog title="分配权限" :visible.sync="showAssignDialog" :close-on-click-modal="false">
        <assignPermission
          ref="permission"
          :assign-id="assignId"
          @close-dialog="showAssignDialog=false"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoleListAPI, deleteRoleAPI } from '@/api/setting'
import AddorEdit from './AddorEdit'
import assignPermission from './assignPermission'
export default {
  components: {
    AddorEdit,
    assignPermission
  },
  data() {
    return {
      list: [],
      assignId: '',
      showDialog: false,
      // 控制弹窗是编辑还是新增
      AddorEdit: false,
      // 控制分配权限弹窗是否显示
      showAssignDialog: false,
      editId: '',
      total: 0,
      params: {
        // 控制一页显示几个
        pagesize: 5,
        // 当前页数
        page: 1
      }
    }
  },
  created() {
    this.getRoleListFn()
  },
  methods: {
    // 封装请求数据的方法
    async  getRoleListFn() {
      // 查询数据  接口要求传入页码和一页几个
      const { rows, total } = await getRoleListAPI(this.params)
      // 赋值给list,用于铺设页面
      this.list = rows
      console.log(rows, total)
      // 把请求回来的数据赋予给total
      this.total = total
      console.log(this.total)
    },
    // scope.row.id可以获取list里面的id值,参考文档
    // 点击删除按钮,调用接口
    delFn(id) {
      this.$confirm('此操作将永久删除该员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // console.log('数量总数和页码', this.total, this.params.pagesize)
        // 点击确认按钮之后,调用接口,删除对应的数据
        await deleteRoleAPI(id)
        // 当不是最后一页删除到最后一个数据的时候,需要把页码减1,回到上一页面上,请求的是上一页的数据
        if (this.list.length === 1) {
          this.params.page--
          if (this.params.page === 0) {
            this.params.page = 1
          }
        }
        // 刷新页面
        this.getRoleListFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增角色
    addFn() {
      // 点击新增角色,控制弹窗出现
      this.showDialog = true
      // 点击新增,AddorEdit为false
      this.AddorEdit = false
    },
    // 子组件点击确定按钮,关闭弹窗,刷新页面
    updateSettFn() {
      // 弹窗关闭
      this.showDialog = false
      // 刷新页面
      this.getRoleListFn()
    },
    // 点击子组件中取消按钮,关闭弹窗
    offFn() {
      // 1关闭弹窗
      this.showDialog = false
      //
    },
    // 点击编辑按钮,弹出弹层
    editFn(id) {
      this.showDialog = true
      this.editId = id
      // 给子组件传过去一个标识, 判断是不是编辑
      this.AddorEdit = true
    },
    // 编辑完成,点击按钮,关闭弹窗,刷新页面
    updateRoleFn() {
      this.showDialog = false
      // 刷新页面
      this.getRoleListFn()
    },
    // 页码改变的时候触发
    pageChangeFn(newPage) {
      // 1 点击新的页码替换掉旧的
      this.params.page = newPage
      console.log(this.params.page)
      // 2 再次请求数据
      this.getRoleListFn()
    },
    // 分配权限按钮,弹窗出现
    assignFn(id) {
      // 1 弹出弹窗
      this.showAssignDialog = true
      // 2 保存角色的id
      this.assignId = id
      // 3 手动的调用子组件的loadPermissionByRoleId ,去根据最新的assignId获取权限信息
      // 因为页面初次打开时,弹窗是隐藏的,此时子组件并没有创建出来所以要加if判断
      if (this.$refs.permission) {
        // 添加$nextTick的原因是
        // 父子组件的传值是异步的
        // this.assignId = id虽然会导致子组件中props值的变化,但是这个变化时异步的,所以要加$nextTick
        this.$nextTick(() => {
          this.$refs.permission.loadPermissionByRoleId()
        })
      }
    }
  }

}
</script>

<style>

</style>

